<template>

  <div class="sign">
    <span
      v-if="stateId==0||stateId==1"
      class="mainStyle"
    > Waiting </span>
    <span
      v-if="stateId==2||stateId==3"
      class="mainStyle"
    > Allocated </span>
    <span
      v-if="stateId==4"
      class="mainStyle"
    > Sent </span>
    <span
      v-if="stateId==5"
      class="receivedStyle"
    > Cancelled </span>
    <span
      v-if="stateId==6"
      class="redStyle"
    > Received </span>
    <div :class="{
                 'sign_icon_wait':stateId==0||stateId==1,
                 'sign_icon_allocated':stateId==2||stateId==3,
                  'sign_icon_sent':stateId==4,
                  'sign_icon_received':stateId==6,
                  'sign_icon_cancelled':stateId==5
                  }">
      <div class="a">

      </div>

      <div class="b">

      </div>
      <div class="c">

      </div>
      <div class="d">

      </div>
      <div class="triangle_a1"></div>
      <div class="triangle_a2"></div>
      <div class="triangle_b1"></div>
      <div class="triangle_b2"></div>
      <div class="triangle_c1"></div>
      <div class="triangle_c2"></div>
    </div>
  </div>

</template>
<script>
export default {
  name: 'stateOrder',
  props: {
    stateId: {
      type: Number
    }
  },
  data() {
    return {
      stateValue: ''
    }
  },
  mounted() {
    /**
     *  stateId
     * 1 waiting
     * 2 Allocated
     * 3 Sent
     * 4 Received
     * 5 Cancelled
     */
  }
}
</script>
<style lang="scss" scoped>
.sign {
  flex: 1;
  display: flex;
  flex-direction: column;
  font-size: 10px;
  margin-top: -7px;
  .mainStyle {
    color: $main-color;
  }
  .receivedStyle {
    color: #00a550;
  }
  .redStyle {
    color: red;
  }
  .sign_icon_wait {
    margin-top: 2px;
    width: 138px;
    height: 20px;
    background-color: #cccccc;
    border-radius: 20px;
    overflow: hidden;
    position: relative;

    .a {
      width: 30px;
      height: 100%;
      background-color: $main-color;
      position: absolute;
    }
    .triangle_a1 {
      position: absolute;
      left: 31px;
      width: 0;
      height: 0;
      border-top: 14px solid transparent;
      border-left: 14px solid #ffffff;
      border-bottom: 14px solid transparent;
      top: -4px;
      z-index: 10;
    }

    .triangle_a2 {
      position: absolute;
      left: 30px;
      width: 0;
      height: 0;
      top: -4px;
      border-top: 14px solid transparent;
      border-left: 14px solid $main-color;
      border-bottom: 14px solid transparent;
      z-index: 20;
    }

    .b {
      left: 30px;
      width: 30px;
      height: 100%;
      background-color: #cccccc;
      position: absolute;
    }
    .triangle_b1 {
      position: absolute;
      left: 61px;
      width: 0;
      height: 0;
      border-top: 14px solid transparent;
      border-left: 14px solid #ffffff;
      border-bottom: 14px solid transparent;
      top: -4px;
      z-index: 10;
    }

    .triangle_b2 {
      position: absolute;
      left: 60px;
      width: 0;
      height: 0;
      top: -4px;
      border-top: 14px solid transparent;
      border-left: 14px solid #cccccc;
      border-bottom: 14px solid transparent;
      z-index: 20;
    }
    .c {
      width: 30px;
      height: 100%;
      background-color: #cccccc;
      position: absolute;
      left: 64px;
    }
    .triangle_c1 {
      position: absolute;
      left: 92px;
      width: 0;
      height: 0;
      border-top: 14px solid transparent;
      border-left: 14px solid #ffffff;
      border-bottom: 14px solid transparent;
      top: -4px;
      z-index: 10;
    }

    .triangle_c2 {
      position: absolute;
      left: 91px;
      width: 0;
      height: 0;
      top: -4px;
      border-top: 14px solid transparent;
      border-left: 14px solid #cccccc;
      border-bottom: 14px solid transparent;
      z-index: 20;
    }
    .d {
      width: 48px;
      height: 100%;
      background-color: #cccccc;
      position: absolute;
      right: 0;
    }
  }
  .sign_icon_allocated {
    margin-top: 2px;
    width: 138px;
    height: 20px;
    background-color: #cccccc;
    border-radius: 20px;
    overflow: hidden;
    position: relative;

    .a {
      width: 30px;
      height: 100%;
      background-color: $main-color;
      position: absolute;
    }
    .triangle_a1 {
      position: absolute;
      left: 31px;
      width: 0;
      height: 0;
      border-top: 14px solid transparent;
      border-left: 14px solid #ffffff;
      border-bottom: 14px solid transparent;
      top: -4px;
      z-index: 10;
    }

    .triangle_a2 {
      position: absolute;
      left: 30px;
      width: 0;
      height: 0;
      top: -4px;
      border-top: 14px solid transparent;
      border-left: 14px solid $main-color;
      border-bottom: 14px solid transparent;
      z-index: 20;
    }

    .b {
      left: 30px;
      width: 30px;
      height: 100%;
      background-color: $main-color;
      position: absolute;
    }
    .triangle_b1 {
      position: absolute;
      left: 61px;
      width: 0;
      height: 0;
      border-top: 14px solid transparent;
      border-left: 14px solid #ffffff;
      border-bottom: 14px solid transparent;
      top: -4px;
      z-index: 10;
    }

    .triangle_b2 {
      position: absolute;
      left: 60px;
      width: 0;
      height: 0;
      top: -4px;
      border-top: 14px solid transparent;
      border-left: 14px solid $main-color;
      border-bottom: 14px solid transparent;
      z-index: 20;
    }
    .c {
      width: 30px;
      height: 100%;
      background-color: #cccccc;
      position: absolute;
      left: 64px;
    }
    .triangle_c1 {
      position: absolute;
      left: 92px;
      width: 0;
      height: 0;
      border-top: 14px solid transparent;
      border-left: 14px solid #ffffff;
      border-bottom: 14px solid transparent;
      top: -4px;
      z-index: 10;
    }

    .triangle_c2 {
      position: absolute;
      left: 91px;
      width: 0;
      height: 0;
      top: -4px;
      border-top: 14px solid transparent;
      border-left: 14px solid #cccccc;
      border-bottom: 14px solid transparent;
      z-index: 20;
    }
    .d {
      width: 48px;
      height: 100%;
      background-color: #cccccc;
      position: absolute;
      right: 0;
    }
  }
  .sign_icon_sent {
    margin-top: 2px;
    width: 138px;
    height: 20px;
    background-color: #cccccc;
    border-radius: 20px;
    overflow: hidden;
    position: relative;

    .a {
      width: 30px;
      height: 100%;
      background-color: $main-color;
      position: absolute;
    }
    .triangle_a1 {
      position: absolute;
      left: 31px;
      width: 0;
      height: 0;
      border-top: 14px solid transparent;
      border-left: 14px solid #ffffff;
      border-bottom: 14px solid transparent;
      top: -4px;
      z-index: 10;
    }

    .triangle_a2 {
      position: absolute;
      left: 30px;
      width: 0;
      height: 0;
      top: -4px;
      border-top: 14px solid transparent;
      border-left: 14px solid $main-color;
      border-bottom: 14px solid transparent;
      z-index: 20;
    }

    .b {
      left: 30px;
      width: 30px;
      height: 100%;
      background-color: $main-color;
      position: absolute;
    }
    .triangle_b1 {
      position: absolute;
      left: 61px;
      width: 0;
      height: 0;
      border-top: 14px solid transparent;
      border-left: 14px solid #ffffff;
      border-bottom: 14px solid transparent;
      top: -4px;
      z-index: 10;
    }

    .triangle_b2 {
      position: absolute;
      left: 60px;
      width: 0;
      height: 0;
      top: -4px;
      border-top: 14px solid transparent;
      border-left: 14px solid $main-color;
      border-bottom: 14px solid transparent;
      z-index: 20;
    }
    .c {
      width: 30px;
      height: 100%;
      background-color: $main-color;
      position: absolute;
      left: 64px;
    }
    .triangle_c1 {
      position: absolute;
      left: 91px;
      width: 0;
      height: 0;
      border-top: 14px solid transparent;
      border-left: 14px solid #ffffff;
      border-bottom: 14px solid transparent;
      top: -4px;
      z-index: 10;
    }

    .triangle_c2 {
      position: absolute;
      left: 90px;
      width: 0;
      height: 0;
      top: -4px;
      border-top: 14px solid transparent;
      border-left: 14px solid $main-color;
      border-bottom: 14px solid transparent;
      z-index: 20;
    }
    .d {
      width: 48px;
      height: 100%;
      background-color: #cccccc;
      position: absolute;
      right: 0;
    }
  }
  .sign_icon_received {
    margin-top: 2px;
    width: 138px;
    height: 20px;
    background-color: #cccccc;
    border-radius: 20px;
    overflow: hidden;
    position: relative;

    .a {
      width: 30px;
      height: 100%;
      background-color: $main-color;
      position: absolute;
    }
    .triangle_a1 {
      position: absolute;
      left: 31px;
      width: 0;
      height: 0;
      border-top: 14px solid transparent;
      border-left: 14px solid #ffffff;
      border-bottom: 14px solid transparent;
      top: -4px;
      z-index: 10;
    }

    .triangle_a2 {
      position: absolute;
      left: 30px;
      width: 0;
      height: 0;
      top: -4px;
      border-top: 14px solid transparent;
      border-left: 14px solid $main-color;
      border-bottom: 14px solid transparent;
      z-index: 20;
    }

    .b {
      left: 30px;
      width: 30px;
      height: 100%;
      background-color: $main-color;
      position: absolute;
    }
    .triangle_b1 {
      position: absolute;
      left: 61px;
      width: 0;
      height: 0;
      border-top: 14px solid transparent;
      border-left: 14px solid #ffffff;
      border-bottom: 14px solid transparent;
      top: -4px;
      z-index: 10;
    }

    .triangle_b2 {
      position: absolute;
      left: 60px;
      width: 0;
      height: 0;
      top: -4px;
      border-top: 14px solid transparent;
      border-left: 14px solid $main-color;
      border-bottom: 14px solid transparent;
      z-index: 20;
    }
    .c {
      width: 30px;
      height: 100%;
      background-color: $main-color;
      position: absolute;
      left: 64px;
    }
    .triangle_c1 {
      position: absolute;
      left: 91px;
      width: 0;
      height: 0;
      border-top: 14px solid transparent;
      border-left: 14px solid #ffffff;
      border-bottom: 14px solid transparent;
      top: -4px;
      z-index: 10;
    }

    .triangle_c2 {
      position: absolute;
      left: 90px;
      width: 0;
      height: 0;
      top: -4px;
      border-top: 14px solid transparent;
      border-left: 14px solid $main-color;
      border-bottom: 14px solid transparent;
      z-index: 20;
    }
    .d {
      width: 48px;
      height: 100%;
      background-color: #00a550;
      position: absolute;
      right: 0;
    }
  }
  .sign_icon_cancelled {
    margin-top: 2px;
    width: 138px;
    height: 20px;
    background-color: #cccccc;
    border-radius: 20px;
    overflow: hidden;
    position: relative;

    .a {
      width: 30px;
      height: 100%;
      background-color: $main-color;
      position: absolute;
    }
    .triangle_a1 {
      position: absolute;
      left: 31px;
      width: 0;
      height: 0;
      border-top: 14px solid transparent;
      border-left: 14px solid #ffffff;
      border-bottom: 14px solid transparent;
      top: -4px;
      z-index: 10;
    }

    .triangle_a2 {
      position: absolute;
      left: 30px;
      width: 0;
      height: 0;
      top: -4px;
      border-top: 14px solid transparent;
      border-left: 14px solid $main-color;
      border-bottom: 14px solid transparent;
      z-index: 20;
    }

    .b {
      left: 30px;
      width: 30px;
      height: 100%;
      background-color: $main-color;
      position: absolute;
    }
    .triangle_b1 {
      position: absolute;
      left: 61px;
      width: 0;
      height: 0;
      border-top: 14px solid transparent;
      border-left: 14px solid #ffffff;
      border-bottom: 14px solid transparent;
      top: -4px;
      z-index: 10;
    }

    .triangle_b2 {
      position: absolute;
      left: 60px;
      width: 0;
      height: 0;
      top: -4px;
      border-top: 14px solid transparent;
      border-left: 14px solid $main-color;
      border-bottom: 14px solid transparent;
      z-index: 20;
    }
    .c {
      width: 30px;
      height: 100%;
      background-color: red;
      position: absolute;
      left: 64px;
    }
    .triangle_c1 {
      position: absolute;
      left: 91px;
      width: 0;
      height: 0;
      border-top: 14px solid transparent;
      border-left: 14px solid #ffffff;
      border-bottom: 14px solid transparent;
      top: -4px;
      z-index: 10;
    }

    .triangle_c2 {
      position: absolute;
      left: 90px;
      width: 0;
      height: 0;
      top: -4px;
      border-top: 14px solid transparent;
      border-left: 14px solid red;
      border-bottom: 14px solid transparent;
      z-index: 20;
    }
    .d {
      width: 48px;
      height: 100%;
      background-color: red;
      position: absolute;
      right: 0;
    }
  }
}
</style>